<template>
	<div class="gk-layout-container">
		<div class="gk-layout-header">
			<!--工具栏-->
			<div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
				<el-form :inline="true" :model="filters" :size="size">
					<el-form-item>
						<el-select v-model="filters.status" style="width: 175px;" clearable  filterable 	:placeholder="$t('field.receipt.status')">
							<el-option v-for="item in dicts.status" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select v-model="filters.stn" style="width: 175px;" clearable :placeholder="$t('field.receipt.stn')">
							<el-option v-for="item in dicts.stnOut" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-date-picker type="date" v-model="filters.createBeginTime " placeholder="开始时间"
						  format="yyyy-MM-dd" :style="{width: '175px'}">
						</el-date-picker>
					</el-form-item>
			

					<el-form-item>
						<el-date-picker type="date"
						 v-model="filters.createEndTime "
						  placeholder="结束时间"
							 format="yyyy-MM-dd" 
							 style="width:175px">
						</el-date-picker>
					</el-form-item>
					
					<el-form-item>
						<kt-button icon="fa fa-search" :label="$t('action.search')" perms="doo:item:view" type="primary" @click="findPage(null)" />
					</el-form-item>
					<el-form-item>
						<kt-button icon="fa fa-plus" :label="$t('action.add')" perms="doo:item:add" type="primary" @click="handleAdd" />
					</el-form-item>
				</el-form>
			</div>
			<div class="toolbar" style="float:right;padding-top:0px;padding-right:0px;">
				<el-form :inline="true" :size="size">
					<el-form-item>
						<el-button-group>
							<el-tooltip content="打印" placement="top">
								<el-button icon="fa fa-print" @click="handlePreview" />
							</el-tooltip>

							<el-tooltip content="导出Excel" placement="top">
								<el-button icon="fa fa-file-excel-o" @click="exportExcel" />
							</el-tooltip>
						</el-button-group>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<!--表格内容栏-->
		<div class="gk-layout-main">
			<el-table :data="pageResult.content" class='gk-main-table' height="250" v-loading="loading" size="mini"
				align="left" style="width:100%;">
				<el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
					<template slot-scope="scope"> {{scope.$index+1}} </template>
				</el-table-column>

				<column  prop="status" label="状态"  :formatter="selectionFormat"/>
				<column  prop="stn" :label="$t('field.stn')" :formatter="selectionFormat" /> 
				<column  prop="beginTime" :label="$t('beginTime')" :formatter="dateFormat" /> 
				<column  prop="finshTime" :label="$t('finshTime')" :formatter="OverdateFormat" /> 

				<el-table-column  header-align="center" align="center" width="300" :label="$t('action.operation')">
					<template slot-scope="scope">
						<kt-delete-button   perms="doo:item:delete"  @click="handleDelete(scope.$index, scope.row)" />
						<kt-button icon="fa fa-edit" :label="$t('action.edit')" perms="doo:item:edit" @click="handleEdit(scope.$index, scope.row)" />
						<kt-button icon="fa fa-edit" label="生成任务" perms="doo:item:edit"@click="handleGenerate(scope.$index, scope.row)" />
		 
					</template>
				</el-table-column>

				
			</el-table>
		</div>
		<!--分页栏-->
		<div class="toolbar gk-layout-footer" style="padding:10px;">

			<el-pagination layout="total, prev, pager, next, jumper" @current-change="findPage"
				:current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize" :total="pageResult.totalSize"
				style="float:right;">
			</el-pagination>
		</div>



		<edit-item-out :key="componentKey" ref="editItmeOut" :subDataForm="dataForm" :dialogVisible="dialogVisible1"
			:add="add" :stnOut="this.filters.stn" @receiptHidden="receiptHidden"></edit-item-out>

	</div>

</template>

<script>
	import PopupTreeInput from "@/components/PopupTreeInput"

	import KtButton from "@/views/Core/KtButton"
 
	import { format } from "@/utils/datetime"
	import { myPrint } from "@/utils/LodopFuncs"
	import Column from "@/views/Core/Column"
	import EditItemOut from "./EditItemOut"
	import { baseUrl } from '@/utils/global'
	import { printMoudle } from "@/utils/print"
	import { myXlsExport } from "@/excel/myXls"
	import KtDeleteButton from "@/views/Core/KtDeleteButton"
	export default {
		components: {
			PopupTreeInput,
		
			KtButton,
		 
			EditItemOut,
			KtDeleteButton,
			Column,
		},
		data() {
			return {
				size: 'small',
				filters: {
					batchNo: '',
					outTypeClass: 4,
					outType: 1
				},
				uploadData: {

				},
				loading: false,
				innerHtml: '',
				componentKey: 0,
				baseUrl: baseUrl,

				dicts: this.$store.state.dict.dicts,

				pageRequest: { pageNum: 1, pageSize: 7 },
				pageResult: {},

				exportUrl: "receiptOut/ExportExcel",  //导出excel路径
				add: false, // true:新增, false:编辑
				dialogVisible1: false, // 新增编辑界面是否显示
				editLoading: false,
				stockInList: [],
				// 新增编辑界面数据
				dataForm: {
					id: 0,
					 
				},

				deptData: [],
				deptTreeProps: {
					label: 'name',
					children: 'children'
				},
				roles: []

			}
		},
		computed: {

		},
		methods: {
			receiptHidden: function () {

				this.dialogVisible1 = false;
				this.findPage(null);
			},
			// 获取分页数据
			findPage: function (data) {
				data = data || 1
				this.filters.pageNum = data
				this.pageRequest.pageNum = data

				this.filters.pageSize = this.pageRequest.pageSize
				this.$api.doo.findReceiptOutPage(this.filters).then((res) => {
					this.pageResult = res.data
				}).then(data != null ? data.callback : '')
			},
			//导出的方法
			exportExcel() {
				this.filters.pageSize = -1
		 
					this.$api.doo.findReceiptOutPage(this.filters).then((res) => {
						const tHeader = ['单号', '状态', '站台号'];
					
						const filterVal = ['receiptNo', 'status', 'stn'];
						
						 myXlsExport(tHeader, filterVal ,res.data, '出库单导出');
						
					})
				 
			},
			// 批量删除
			handleDelete: function (index, data) {
				let params = [{ 'id': data.id }]
				this.$api.doo.batchDelete(params).then((res) => {
					if (res.code == 200) {
						this.$message({ message: '操作成功', type: 'success' })
						this.findPage(this.filters.pageNum)
					} else {
						this.$message({ message: '操作失败, ' + res.msg, type: 'error' })
					}
				})
			},
			 
			// 显示打印界面
			handlePreview: function () {
			
				this.$api.doo.findReceiptOutPage(this.filters).then((res) => {

					this.$api.doo.Preview(res.data.content[0]).then((res) => {
						var strList = res.data;
						var html = strList.html;

						if (strList.outList.length > 0) {
							html = html.replace("{receiptNo}", strList.outList[0].receiptNo);
						}
						var detail = "";
						if (strList.outDetailList.length > 0) {
							for (let index = 0; index < strList.outDetailList.length; index++) {
								detail += "<tr>";
								detail += "<td>" + (strList.outDetailList[index].batchNo == null ? '' : strList.outDetailList[index].batchNo) + "</td>";
								detail += "<td>" + (strList.outDetailList[index].itemName == null ? '' : strList.outDetailList[index].itemName) + "</td>";
								detail += "<td>" + (strList.outDetailList[index].planCount == null ? 0 : strList.outDetailList[index].planCount) + "</td>";
								detail += "<td>" + (strList.outDetailList[index].finishCount == null ? 0 : strList.outDetailList[index].finishCount) + "</td>";
								detail += "<td>" + (strList.outDetailList[index].stn == null ? '' : strList.outDetailList[index].stn) + "</td>";
								detail += "</tr>";
							}
						}
						html = html.replace("{Content}", detail);

						printMoudle(html);
						//myPrint("入库单",html)
						
					})
				})

			},


			handleAdd: function () {
				this.filters.stn=1
				this.componentKey += 1;
				this.dialogVisible1 = true
				this.add = true
				this.dataForm = {
					id: 0,
		 
					 
				}
			},
			// 生成任务
			handleGenerate: function (index, row) {

				this.$confirm('确定生成任务吗？', '提示', {}).then(() => {
					this.$api.doo.otheroutGenerate(row).then((res) => {
						if (res.code == 200) {
							this.$message({ message: '操作成功', type: 'success' })
							this.findPage(null)
						} else {
							this.$message({ message: '操作失败, ' + res.msg, type: 'error' })
						}
					})
				})
			},
			//导出文档
			handleExport: function (params) {
				let a = document.createElement('a')
				a.href = baseUrl + "/api/file/exports/" + params.row.id + "/" + params.row.receiptNo + "/" + params.row.outType
				a.click();
			},
			
			// 显示编辑界面
			handleEdit: function (params, row) {
					 debugger
				this.dialogVisible1 = true
				this.operation = false
				this.dataForm = Object.assign({}, row) 
				   this.$refs.editItmeOut.getDetials();
			},
			// 时间格式化
			dateFormat: function (row, column, cellValue, index) {
				return format(row[column.property])
			},
			OverdateFormat: function (row, column, cellValue, index) {

				if (row.status == 3) {
					return format(row[column.property]);
				}
				else {
					return "";
				}

			},
		 
			selectionFormat: function (row, column, cellValue, index) {
				let key = ""
				let propt = column.property;
				if (propt == "stn") {
					key = "stnOut"
				} else if (propt == "outType") {
					key = "outTypeItem"
				} else if (propt == "priority") {
					key = "priority"
				} else if (propt == "pickType") {
					key = "pickType"
				} else if (propt == "status") {
					key = "status"
				}

				let val = row[column.property];
				let dict = this.$store.state.dict.dicts[key];
				if (dict == undefined) {
					return row[column.property]
				}
				for (let i = 0; i < dict.length; i++) {
					if (dict[i].value == val) {
						return dict[i].label;
					}
				}

				return row[column.property]
			},
		 
			// 处理表格列过滤显示
			handleFilterColumns: function (data) {

				this.$refs.tableColumnFilterDialog.setDialogVisible(false)
			}
		},
		created() {

		},
		mounted() {


			this.findPage();
		},
		watch: {
			$route(to, from) {
				console.log(to.path);
				//debugger
				this.filters.outType = parseInt(to.path.substr(to.path.lastIndexOf('/') + 1))
				this.findPage({ pageRequest: { pageNum: 1, pageSize: 7 } });
			}
		}
	}
</script>

<style scoped>

</style>